mouseOver = false;
mouseDown = false;
var tempPos = null;

window.onload = () => {
    dynamicLoadCss('../css/index.css')
    setInterval(()=>{
        console.log(document.getElementById('left_middle_border').style.left);
    },1000);
}
function reactClick(e) {
    if(mouseOver==true&&mouseDown==true){
        let x, y;
        e = e || window.event;
        result = {
            x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
            y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop
        };
        if (tempPos == null) {
            tempPos = result;
        } else {
            k = { x: (result.x - tempPos.x), y: (result.y - tempPos.y) }
            console.log(k);
            var border = document.getElementById('left_middle_border');
            console.log(typeof(border.style.left),border.style.left)
            tempPos = result;
        }
    }
}

function test() {
    console.log('mouseDown', mouseDown);
    console.log('mouseOver', mouseOver);
}

function ControlDown() {
    mouseDown = true;
}

function ControlUp() {
    mouseDown = false;
    tempPos = null;
}

function ControlOver() {
    mouseOver = true;
}

function ControlOut() {
    mouseOver = false;
    mouseDown = false;
}

function dynamicLoadCss(url) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.type='text/css';
    link.rel = 'stylesheet';
    link.href = url;
    head.appendChild(link);
}

// function DragControlDown() {
//     var border = document.getElementById("left_middle_border");
//     var posArray = [];
//     border.onmousemove = (e) => {
//         let x, y;
//         e = e || window.event;
//         result = {
//             x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
//             y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop
//         };
//         posArray.push(result);
//         console.log(posArray);
//     }
// }
